<template>
  <micro-app-a
    :default-page="props.subAppDefaultPage"
    :keep-alive="props.subAppKeepAlive"
    :name="props.subAppName"
    :iframe="subAppSettting?.iframe"
    :url="subAppSettting?.origin"
  ></micro-app-a>
</template>

<script lang="ts" setup>
import microApp from '@micro-zoe/micro-app';
import { onBeforeUnmount, ref } from 'vue';
import { watch } from 'vue';
import { computed, defineProps, useAttrs } from 'vue';

const props = defineProps({
  /** 子应用名称 */
  subAppName: {
    type: String,
    required: true
  },
  /** 要跳转的路径 */
  subAppPath: {
    type: String,
    required: true
  },
  subAppDefaultPage: {
    type: String,
    default: '/empty'
  },
  subAppKeepAlive: {
    type: Boolean,
    default: false
  },
})

/** 实际的path */
const activePath = ref(props.subAppDefaultPage);

/** 剩余参数当做传给组件的props */
const otherProps = useAttrs();

const subAppSettting = computed(() => {
  return [
    {
      name: 'admin',
      builder: 'vite',
      iframe: true,
      origin: '//127.0.0.1:2333',
    },
    {
      name: 'appBk',
      builder: 'vite',
      iframe: true,
      origin: '//127.0.0.1:2334/microappB/',
    },
    {
      name: 'service',
      builder: 'webpack',
      iframe: false,
      origin: '//127.0.0.1:2334',
    }
  ].find(item => item.name === props.subAppName);
})

watch([()=>props.subAppPath, ()=>JSON.stringify(otherProps), ()=>props.subAppName], () => {
  if (subAppSettting.value && props.subAppPath) {
    console.log('watch')
    toTargetPage();
  }
}, { immediate: true })


function toTargetPage() {
  if (activePath.value == props.subAppDefaultPage) {
    setTimeout(() => {
      microApp.clearData(props.subAppName);
      microApp.setData(props.subAppName, {
        ...otherProps,
        subAppName: props.subAppName,
      });
      activePath.value = props.subAppPath;
      microApp.router.replace({
        name: props.subAppName,
        path: props.subAppPath,
      })
    }, 40)
  } else if(activePath.value != props.subAppPath) {
    setTimeout(() => {
      microApp.clearData(props.subAppName);
      microApp.setData(props.subAppName, {
        ...otherProps,
        subAppName: props.subAppName,
      });
      activePath.value = props.subAppPath;
      microApp.router.push({
        name: props.subAppName,
        path: props.subAppPath,
      })
    }, 40)
  } else {
    setTimeout(() => {
      microApp.router.push({
        name: props.subAppName,
        path: props.subAppDefaultPage,
      })

      setTimeout(() => {
        microApp.clearData(props.subAppName);
        microApp.setData(props.subAppName, {
          ...otherProps,
          subAppName: props.subAppName,
        });
        activePath.value = props.subAppPath;
        microApp.router.replace({
          name: props.subAppName,
          path: props.subAppPath,
        })
      }, 40)
    }, 40)
  }
}

onBeforeUnmount(() => {
  console.log('>> MicroApp卸载')
})

</script>

<style scoped>/** */

</style>
